<template>
    <div class="wrapper customer-box">
        <el-form ref="customer" label-position="top" :inline="true" :model="filter" class="demo-form-inline">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="类目名称:">
                        <el-input placeholder="类目名称" v-model="filter.name" size="small" class="input"></el-input>
                        <el-button size="small" type="primary" @click="getCategory('search')" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div style="margin-top: 30px">
            <el-breadcrumb separator="/" v-if="breadcrumb.length">
                <el-breadcrumb-item  v-for="(item,index) in breadcrumb" :key="index">
                    <span @click="backCategory(item)">{{item.name}}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-row class="customer_row">
            <el-table
                    :data="categoryList"
                    v-model="categoryList"
                    style="width: 100%;"
                    border
                    highlight-current-row>
                <el-table-column prop="customerName" label="类目名称" className="item" min-width="200" align="center" >
                    <template scope="scope">
                        <div class="customer_col">
                             <span @click="rowClick(scope.row)"  :class="{ active: scope.row.visited == true }">
                                {{ scope.row.name}}
                            </span>
                        </div>

                        <el-button v-show="scope.row.addLine" type="primary" icon="el-icon-circle-plus-outline" size="mini" class="btn-add" @click="parentId = scope.row.parentId;dialogVisible = true">添加类目</el-button>
                    </template>
                </el-table-column>

                <el-table-column prop="gmtCreate" label="创建时间" min-width="179" align="center" className="item"></el-table-column>
                <el-table-column prop="gmtModify" label="修改时间" min-width="179" align="center" className="item"></el-table-column>

                <el-table-column prop="action" label="操作"  min-width='100' fixed="right" align="center" className="item">
                    <template scope="scope">
                        <div class="operator-btn" v-show="!scope.row.addLine">
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBox(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                    title="类目名称："
                    :visible.sync="dialogVisible"
                    @close="handleDialogClose"
                    width="20%">
                <el-input placeholder="类目名称" v-model="addName" size="small" class="input" />
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="addCategory" size="small">确 定</el-button>
                </span>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {Row, Col, Form, FormItem, Input, Button, Table, TableColumn, Option,Message, MessageBox, Dialog,Breadcrumb,BreadcrumbItem
    } from 'element-ui'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import {SHOW_MESSAGE,MESSAGE_IDS,MESSAGE_NAMES,MESSAGE_TELS} from '../../store/mutation-types/template/index';
    import {getDate , returnDate,getArraySub , getLevelName, validTel, setToken, getCookie ,uniqueArr} from '../../utils/auth'
    import {formatDate} from '../../assets/js/common.js';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Option);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Dialog);
    Vue.use(Breadcrumb);
    Vue.use(BreadcrumbItem);
    Vue.use(Option)

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    
    export default {
    	scrollToTop: false,
        head(){
            return {
                title: this.title
            }
        },
        data () {
            return {
                title: '商品类目',
                tabName: '商品类目',
                index: 'index',
                filter: {
                    name: '',   //类目名称
                    parentId: ''
                },
                categoryList:[],
                addName: '',
                parentId: '',
                dialogVisible: false,
                breadcrumb: [{name:'全部类目', parentId: '', id:-1, themeId: '', special:true}],
                themeId:''
            }
        },
        methods: {
            handleDialogClose(){
                this.dialogVisible = false;
            },
            // 获取商品列表
            getCategory (type) {
//                this.setFilterCookie();

                if(type == 'search'){
                    this.filter.parentId = '';
                    if(this.filter.name){
                        this.breadcrumb = [{name:'查询：'+this.filter.name, parentId: '', id:-1, themeId: '', searchName:this.filter.name }];
                    }else{
                        this.breadcrumb = [{name:'全部类目', parentId: '', id:-1, themeId: '', special:true}];
                    }
                }
                this.$store.dispatch('categoryList', this.filter)
                    .then((response) => {
                        if(!response){return}
                        let result = response.data;
                        if (result.successed && result.data) {
                            for(let i = 0; i < result.data.length; i++) {
                                result.data[i].gmtCreate = formatDate(result.data[i].gmtCreate,'YYYY-MM-dd hh:mm:ss');
                                result.data[i].gmtModify = formatDate(result.data[i].gmtModify,'YYYY-MM-dd hh:mm:ss');
                            }
                            result.data.push({addLine:true,parentId:this.themeId});
                            this.categoryList = result.data;
                            this.filter.name = ''
                        }
                    })
            },
            empty () {
                this.filter = {
                    name: '',   //类目名称
                    parentId: ''
                };
            },
            // 删除商品弹框
            deleteBox (row) {
                MessageBox.confirm('确认删除类目：' + row.name + '吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteCategory(row);
                })
                .catch(() => {

                });
            },
            // 删除商品
            deleteCategory (row) {
                this.$store.dispatch('deleteCategory', {themeId: row.themeId})
                    .then((response) => {
                        if(!response){return}
                        let result = response.data;
                        if (result.successed) {
                            this.filter.parentId = this.breadcrumb[this.breadcrumb.length-1].themeId;
                            this.getCategory();
                            Message.success({
                                message: '删除成功'
                            });
                        }else{
                            Message.error({
                                message: '删除失败'
                            });
                        }

                    })
            },

            //增加类目
            addCategory() {
                if(!this.addName){
                    Message.info({
                        message: '请先输入新增的类目名称'
                    });
                    return;
                }

                this.$store.dispatch('addCategory', {parentId: this.parentId ,name: this.addName})
                    .then((response) => {
                        if(!response){return}
                        var result = response.data;
                        if (result.successed) {
                            this.filter.parentId = this.breadcrumb[this.breadcrumb.length-1].themeId;
                            this.getCategory();
                            Message.success({
                                message: '添加成功'
                            });
                        }else{
                            Message.error({
                                message: '添加失败'
                            })
                        }
                        this.dialogVisible = false;
                        this.addName='';
                    })
            },
            rowClick(row){
                this.breadcrumb.push(row);
                this.themeId = row.themeId;

                if(row.addLine) return;
                this.$store.dispatch('categoryList', {parentId:row.themeId, name: ''})
                    .then((response) => {
                        if(!response){return}
                        let result = response.data;
                        if(result.successed && result.data ){
                            result.data.push({addLine:true,parentId:row.themeId});
                            for(let i=0; i< this.categoryList.length; i++){
                                if(this.categoryList[i].id == row.id ){
                                    for(let j=0;j<result.data.length;j++){
                                        result.data[j].gmtCreate = formatDate(result.data[j].gmtCreate,'YYYY-MM-dd hh:mm:ss');
                                        result.data[j].gmtModify = formatDate(result.data[j].gmtModify,'YYYY-MM-dd hh:mm:ss');
                                        this.categoryList=result.data;
                                    }
                                }
                            }
                        }
                    })
            },
            backCategory(item){
                for(let i=0;i<this.breadcrumb.length;i++){
                    if(item.id == this.breadcrumb[i].id){
                        this.breadcrumb.splice(i+1);
                    }
                }
                this.themeId = item.themeId;
                this.filter.parentId = item.themeId;
                if(this.breadcrumb.length == 1 && !this.breadcrumb[0].special) {
                    this.filter.name = this.breadcrumb[0].searchName;
                }
                this.getCategory();
            }
        },
        computed: {
                ...mapGetters({
                    'pageTabsList': 'getPageTabsList'
                })
        },
        created(){
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
            this.getCategory();
        }
    }

</script>

<style lang="scss">
    html,body{
        height: 100%;
    }
    .customer-box{
        .one{
            color:red!important;
        }
    	.linked{
    		width: 100px;
    	}
    	.el-table .item>div{
    		padding: 0;
    	}
        .operator-btn{
            .el-button + .el-button{
                margin-left:0;
            }
            .sort {
                font-size: 20px;
                margin: 0 10px;
                cursor: pointer;
            }
        }
        .el-form {
            .el-form-item {
                width: 70%
            }
            .operator-btn{
                text-align:center;
                padding:0 10px;
            }
            .el-input, .el-select, .el-cascader, .el-date-picker {
                width: 100%
            }
            .input {
                width: 60%;
                margin-right: 5%;
            }
        }
        .action_col {
            position: relative
        }

        .customer_row {
            margin-top: 20px;
            background-color: #ff0000;
        }
        .paging {
            margin-top: 15px;
        }
	    .customer_col {
            cursor: pointer;
            text-align: left;
            margin-left: 30px;
	    }
        .btn-add {
            float: left;
            margin-left: 30px;
        }
    }
    .customer_col {
        cursor: pointer;
        span {
            display: block;
            color: #20a0ff;
        }
    }

    .popover {
        .input {
            width: 150px;
            margin-right: 10px;
        }
        .btn-popover{
            padding: 8px 10px;
        }
    }
</style>